/* =========================================
   HERO SECTION
========================================= */

.hero{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 0 80px;
    background: linear-gradient(135deg,#ffffff 0%,#eef5ff 100%);
}

.hero-container{
    width: 90%;
    max-width: 1320px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

/* =====================
Left Content
===================== */

.hero-content{
    position: relative;
    z-index: 5;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:#EAF7F0;

    color:#39B54A;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    margin-bottom:30px;

}

.hero-badge i{

font-size:18px;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.15;

color:#0A2B67;

margin-bottom:25px;

}

.hero h1 span{

color:#39B54A;

}

.hero p{

font-size:18px;

line-height:1.9;

color:#666;

max-width:620px;

margin-bottom:40px;

}

/* =====================
Buttons
===================== */

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

border-radius:8px;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.btn-primary{

background:#39B54A;

color:#fff;

}

.btn-primary:hover{

background:#0A2B67;

transform:translateY(-4px);

}

.btn-secondary{

border:2px solid #0A2B67;

color:#0A2B67;

}

.btn-secondary:hover{

background:#0A2B67;

color:#fff;

transform:translateY(-4px);

}




/* ======================================
Hero Features
====================================== */

.hero-features{

    display:flex;
    
    gap:25px;
    
    flex-wrap:wrap;
    
    }
    
    .feature-box{
    
    display:flex;
    
    align-items:center;
    
    gap:18px;
    
    padding:20px;
    
    background:#fff;
    
    border-radius:15px;
    
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    
    transition:.35s;
    
    min-width:220px;
    
    }
    
    .feature-box:hover{
    
    transform:translateY(-10px);
    
    }
    
    .feature-box i{
    
    width:60px;
    
    height:60px;
    
    background:#39B54A;
    
    color:#fff;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    border-radius:50%;
    
    font-size:24px;
    
    }
    
    .feature-box h4{
    
    font-size:24px;
    
    color:#0A2B67;
    
    margin-bottom:6px;
    
    }
    
    .feature-box p{
    
    font-size:14px;
    
    color:#666;
    
    margin:0;
    
    line-height:1.5;
    
    }










    /*======================================
 HERO RIGHT IMAGE
======================================*/

.hero-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 700px;
    z-index: 2;
}

/* Main Engineer Image */

.hero-image img{
    width:100%;
    max-width:550px;
    position:relative;
    z-index:10;
    animation: heroFloat 4s ease-in-out infinite;
}

/*======================================
 BACKGROUND CIRCLE
======================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:linear-gradient(135deg,#0A2B67,#39B54A);

    opacity:.08;

    z-index:1;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:2px dashed #39B54A;

    animation:rotateCircle 30s linear infinite;

}

/*======================================
 FLOATING CARD
======================================*/

.floating-card{

    position:absolute;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(15px);

    border-radius:16px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    z-index:20;

    transition:.4s;

}

.floating-card:hover{

    transform:translateY(-10px);

}

.floating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#39B54A;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.floating-card h5{

    font-size:18px;

    color:#0A2B67;

    margin-bottom:4px;

}

.floating-card span{

    font-size:14px;

    color:#666;

}

/*======================================
 CARD POSITIONS
======================================*/

.card-one{

    top:80px;

    left:-30px;

    animation:cardFloat 5s infinite ease-in-out;

}

.card-two{

    top:280px;

    right:-40px;

    animation:cardFloat 6s infinite ease-in-out;

}

.card-three{

    bottom:70px;

    left:20px;

    animation:cardFloat 7s infinite ease-in-out;

}

/*======================================
 SHAPES
======================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    z-index:0;

}

.shape-one{

    width:70px;

    height:70px;

    background:#39B54A;

    opacity:.15;

    top:60px;

    right:40px;

    animation:shapeMove 6s infinite;

}

.shape-two{

    width:35px;

    height:35px;

    background:#0A2B67;

    opacity:.15;

    left:80px;

    bottom:120px;

    animation:shapeMove2 5s infinite;

}

.shape-three{

    width:120px;

    height:120px;

    border:2px solid #39B54A;

    opacity:.2;

    bottom:40px;

    right:90px;

    animation:rotateCircle 25s linear infinite;

}

/*======================================
 ANIMATIONS
======================================*/

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes rotateCircle{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes shapeMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

100%{

transform:translateY(0);

}

}

@keyframes shapeMove2{

0%{

transform:translateX(0);

}

50%{

transform:translateX(20px);

}

100%{

transform:translateX(0);

}

}



/*======================================
 HERO RIGHT IMAGE
======================================*/

.hero-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 700px;
    z-index: 2;
}

/* Main Engineer Image */

.hero-image img{
    width:100%;
    max-width:550px;
    position:relative;
    z-index:10;
    animation: heroFloat 4s ease-in-out infinite;
}

/*======================================
 BACKGROUND CIRCLE
======================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:linear-gradient(135deg,#0A2B67,#39B54A);

    opacity:.08;

    z-index:1;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:2px dashed #39B54A;

    animation:rotateCircle 30s linear infinite;

}

/*======================================
 FLOATING CARD
======================================*/

.floating-card{

    position:absolute;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(15px);

    border-radius:16px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    z-index:20;

    transition:.4s;

}

.floating-card:hover{

    transform:translateY(-10px);

}

.floating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#39B54A;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.floating-card h5{

    font-size:18px;

    color:#0A2B67;

    margin-bottom:4px;

}

.floating-card span{

    font-size:14px;

    color:#666;

}

/*======================================
 CARD POSITIONS
======================================*/

.card-one{

    top:80px;

    left:-30px;

    animation:cardFloat 5s infinite ease-in-out;

}

.card-two{

    top:280px;

    right:-40px;

    animation:cardFloat 6s infinite ease-in-out;

}

.card-three{

    bottom:70px;

    left:20px;

    animation:cardFloat 7s infinite ease-in-out;

}

/*======================================
 SHAPES
======================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    z-index:0;

}

.shape-one{

    width:70px;

    height:70px;

    background:#39B54A;

    opacity:.15;

    top:60px;

    right:40px;

    animation:shapeMove 6s infinite;

}

.shape-two{

    width:35px;

    height:35px;

    background:#0A2B67;

    opacity:.15;

    left:80px;

    bottom:120px;

    animation:shapeMove2 5s infinite;

}

.shape-three{

    width:120px;

    height:120px;

    border:2px solid #39B54A;

    opacity:.2;

    bottom:40px;

    right:90px;

    animation:rotateCircle 25s linear infinite;

}

/*======================================
 ANIMATIONS
======================================*/

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes rotateCircle{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes shapeMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

100%{

transform:translateY(0);

}

}

@keyframes shapeMove2{

0%{

transform:translateX(0);

}

50%{

transform:translateX(20px);

}

100%{

transform:translateX(0);

}

}


/*=====================================================
 HERO DECORATIONS
=====================================================*/

.hero{
    isolation: isolate;
}

/* Blur Glow */

.hero::before{
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(57,181,74,.12);
    border-radius: 50%;
    filter: blur(100px);
    top: -120px;
    left: -120px;
    z-index: -2;
}

.hero::after{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(10,43,103,.08);
    border-radius: 50%;
    filter: blur(120px);
    right: -180px;
    bottom: -180px;
    z-index: -2;
}

/*=========================================
 GRID BACKGROUND
=========================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);

    background-size:60px 60px;

    opacity:.35;

    z-index:-1;

}

/*=========================================
 SCROLL INDICATOR
=========================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.scroll-down span{

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    color:#0A2B67;

}

.mouse{

    width:30px;

    height:52px;

    border:2px solid #0A2B67;

    border-radius:30px;

    position:relative;

}

.mouse::before{

    content:"";

    position:absolute;

    width:6px;

    height:12px;

    background:#39B54A;

    border-radius:50px;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:mouseWheel 2s infinite;

}

/*=========================================
 GLASS PANEL
=========================================*/

.hero-glass{

    position:absolute;

    right:60px;

    bottom:40px;

    width:230px;

    padding:20px;

    border-radius:20px;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.4);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    z-index:30;

}

.hero-glass h4{

    font-size:18px;

    color:#0A2B67;

    margin-bottom:10px;

}

.hero-glass p{

    font-size:14px;

    color:#666;

    line-height:1.6;

    margin:0;

}

/*=========================================
 BADGE ANIMATION
=========================================*/

.hero-badge{

    animation:badgePulse 3s infinite;

}

/*=========================================
 BUTTON EFFECT
=========================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:0;

    top:0;

    background:rgba(255,255,255,.18);

    transition:.45s;

}

.btn:hover::before{

    width:100%;

}

/*=========================================
 ANIMATIONS
=========================================*/

@keyframes mouseWheel{

0%{

opacity:1;

transform:translate(-50%,0);

}

100%{

opacity:0;

transform:translate(-50%,18px);

}

}

@keyframes badgePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}